<template>
  <div class="rbox">
    <div class="zxkf-con">
      <div class="qq">
      <a class="t-time" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1439649533&site=qq&menu=yes ">
        <img class="dong" style="height:44px;" border="0" src="../assets/images/time.png" alt="点击这里给我发消息" title="点击这里给我发消息" />
      </a>
      <a class="hover" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1439649533&site=qq&menu=yes ">
      </a>
      </div>
      
      <div class="gotop" @click="backtop(step)"></div>
    </div>
  </div>
</template>

<script>
  let timer = null
  export default {
    props:{
      step:{
        type:Number,
        default:100
      }
    },
    data () {
      return {

      }
    },
    mounted () {
    },
    methods: {
      backtop(i){
        document.documentElement.scrollTop-=i;
        if (document.documentElement.scrollTop>0) {
          var c=setTimeout(()=>this.backtop(i),20);
        }else {
          clearTimeout(c);
        }
      }
    }
  }
</script>

<style scoped>
  .zxkf-con{width:44px; height:88px;padding-bottom:10px; position:fixed;z-index: 99; right:2px; bottom:50px;}
  .zxkf-con .t-time{float: left;}
  .zxkf-con .t-time{position: absolute;right:-90px;max-width:88px;}
  .zxkf-con .hover{display: block;margin-left:-6px; float:left ;width:44px;height:44px;background: url("../assets/images/online.png")}
  .zxkf-con .hover:hover{width:44px;height:44px;background-image:url("../assets/images/online-hover.png");z-index: 4999;}
  .qq:hover .t-time{width:88px;animation: dong 2s alternate forwards;}
  @keyframes dong {
    0% {right:-90px;}
    100% {right:44px;}
      }
  .zxkf-con .t-time img{margin-left:-6px;margin-bottom: -3px;}

  .gotop{background:url("../assets/images/backtop.png");width:44px;height:44px;float: left;margin-left: -6px;}
  .gotop:hover{background:url("../assets/images/backtop-hover.png")}
</style>
